<template>
  <div class="my_apply_detail">
    <Header-Comp title="额度包"  />
    <div class="header">
      <!-- <div class="nav_bar">
        <div class="nav_item" :class="{'active': activeIndex === index}" v-for="(item, index) in titleList" :key="index">{{item}}</div>
      </div> -->
      <!-- <div class="search_box">
        <input type="text">
        <img src="">
      </div> -->
    </div>
    <div v-if="loding" class="loding"><van-loading type="spinner"  /></div>
    <div class="content" v-else>
        <!-- <img class="detailStr" src="../../../assets/img/detailStr.png"> -->
        <div class="top_box">
            <div class="title">{{actTitle}}</div>
          <div class="time_box">活动时间：{{actStartTime}} 至 {{actEndTime}}</div>
        </div>
        <div class="bottom_content" v-if="list.length">
          <div class="bottom_content_item" v-for="item in list" :key="item.id">
            <div class="show_str">
              <div class="str_item">统计周期：{{item.statTime}}</div>
              <div class="str_item">配额时间：{{item.createTime}}</div>
              <div class="str_item">额度包：{{item.quotaAmt}}</div>
              <div class="str_item">额度包周期：{{item.quotaStartTime}} 至 {{item.quotaEndTime}}</div>
            </div>
            <div class="button_about" @click="subsidyAbout(item)">补贴明细</div>
          </div>
        </div>
        <img v-else class="haveNotData" src="../../../assets/img/haveNotPackageData.png" alt="">
    </div>
  </div>
</template>

<script>
import { qryQuotaPackageByActJrnId } from "@/api/agent";
export default {
  data() {
    return {
      titleList: ['活动奖励','额度包'],
      activeIndex: 0,
      list: [],
      actTitle: '',
      actStartTime: '',
      actEndTime: '',
      loding: true
    }
  },
  mounted() {
    const { actTitle, actStartTime, actEndTime } = this.$route.query
    this.actTitle = actTitle
    this.actStartTime = actStartTime.split(' ')[0]
    this.actEndTime = actEndTime.split(' ')[0]
    this.qryQuotaPackageByActJrnId()
  },
  methods: {
    subsidyAbout(item) {
      const { storeNo, id: quotaId, statTime, quotaStartTime, quotaEndTime } = item
      this.$router.push({name: 'subsidyAbout', query: { storeNo, quotaId, statTime, quotaStartTime, quotaEndTime }})
    },
    qryQuotaPackageByActJrnId() {
      qryQuotaPackageByActJrnId(this.$route.query)
      .then(res => {
        this.list = res.data.data
        this.loding = false
      })
    }
  }
}
</script> 

<style lang="less" scoped>
  .my_apply_detail {
    background: #F9F9F9;
    height: 100%;
  }
  .header {
    .nav_bar {
      background: #fff;
      padding: 25px 0;
      display: flex;
      justify-content: space-evenly;
      .nav_item {
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        &.active {
          color: #FFB72F;
          border-bottom: 5px solid #FFB72F;
        }
      }
    }
    .search_box {
      display: flex;
    }
  }
  .loding {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .content {
    .detailStr {
      width: 100%;
    }
    padding: 20px 30px 0;
    .top_box {
      margin-top: 50px;
      .title {
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
      }
      .time_box {
        margin-top: 22px;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        opacity: 0.8;
      }
    }
    .bottom_content {
      .bottom_content_item {
        
        background: #FFFFFF;
        box-shadow: 0px 0px 4px 0px rgba(34,34,34,0.1);
        border-radius: 15px;
        margin-top: 20px;
        .show_str {
          padding: 40px 32px 0;
          .str_item {
            &.str_item:first-child {
            margin-top: 0;
            }
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #131313;
            margin-top: 26px;
          }
        }
        .button_about {
          margin-top: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 70px;
          background: #FFB72F;
          border-radius: 0 0 15px 15px;
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 44px;
        }
      }
    }
    .haveNotData {
      position: relative;
      transform: translateX(-50%);
      left: 50%;
      margin: 150px 0;
      width: 400px;
    }
  }
</style>